<template>
  <div class="personal-wrap">
    <el-dialog
      v-loading="loading"
      element-loading-text="正在检测认证流程..."
      element-loading-spinner="el-icon-loading"
      custom-class="personal-dialog"
      :visible.sync="personDialogFlag"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :fullscreen="true"
      :show-close="false"
    >
      <div class="explain-top">
        <div class="explain-top-content">
          <h1>云木屋</h1>
          <span>个人认证</span>
        </div>
      </div>
      <div class="personal-dialog-content">
        <div v-show="stepNum < 4" class="dialog-step">
          <div class="step-item step-one step-active">
            <span>1</span>
            <p>填写认证信息</p>
          </div>
          <div class="step-item step-two" :class="{'step-active':stepNum > 1 }">
            <span>2</span>
            <p>二次验证</p>
          </div>
          <div class="step-item step-three" :class="{'step-active':stepNum > 2}">
            <span>3</span>
            <p>设置交易密码</p>
          </div>
          <div
            class="step-item step-four"
            :class="{'step-active':stepNum > 3}"
            @click="selectStep(4)"
          >
            <span>✔</span>
            <p>认证成功</p>
          </div>
        </div>
        <!-- 填写认证信息 -->
        <div
          v-if="stepNum==1"
          class="personal-form"
          v-loading="formLoading"
          element-loading-text="提交中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form ref="oneForm" label-width="100px">
            <el-form-item label="真实姓名：">
              <el-input v-model="oneParams.name" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="证件类型：">
              <el-select
                v-model="oneParams.cardType"
                placeholder="请选择证件类型"
                @change="selectCardType"
              >
                <el-option
                  v-for="item in personCardType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码：">
              <el-input v-model="oneParams.idcard" placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-form>
          <div class="personal-btn">
            <span></span>
            <el-button @click="_personVertify">提交认证</el-button>
          </div>
        </div>

        <!-- 二次验证 -->
        <div
          v-else-if="stepNum==2"
          class="personal-form"
          v-loading="formLoading"
          element-loading-text="提交中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, .8)"
        >
          <el-form ref="oneForm" label-width="100px">
            <el-form-item label="手机号码：">
              <el-input v-model="getCodeParams.phone" placeholder="请输入手机号码" disabled></el-input>
            </el-form-item>

            <el-form-item label="短信验证码：">
              <el-input v-model="empowerParams.code" placeholder="请输入短信验证码"></el-input>
              <span v-if="!downShow" class="getCode" @click="_registerGetYstCode">获取验证码</span>
              <span v-else class="getCode getCode-wait">{{downNum}}秒后重新发送</span>
            </el-form-item>
          </el-form>
          <div class="personal-btn">
            <span></span>
            <el-button @click="_registerEmpower">提交认证</el-button>
          </div>
        </div>

        <!-- 设置交易密码 -->
        <div v-else-if="stepNum==3" class="personal-setPassword">
          <p>为保障您的账户安全，请</p>
          <p>
            <span @click="goSetPassWord" class="goSet">前往设置交易密码 ></span>
            <span>{{second}}秒</span>后自动跳转
          </p>
          <p></p>
        </div>

        <!-- 认证成功 -->
        <div v-else-if="stepNum==4" class="personal-result">
          <img src="@/assets/icon-success.png" alt />
          <h1>实名认证成功，离云木屋更近了一步~</h1>
          <p @click="goContractServices">去开通电子合同服务 ></p>
        </div>

        <!-- 审核中 -->
        <div v-else-if="stepNum==5" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract3.png" alt />
          <h1>审核中~</h1>
          <p class="width-p">您的申请已提交，请耐心等待平台审核！</p>
          <p>如有疑问请联系：400-156-8818</p>
        </div>

        <!-- 审核回退 -->
        <div v-else-if="stepNum==6" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract3.png" alt />
          <h1>审核回退</h1>
          <p @click="_personInit">重新认证</p>
        </div>

        <!-- 审核失败 -->
        <div v-else-if="stepNum==7" class="personal-result stepNum5">
          <img src="@/assets/authentication/contract4.png" alt />
          <h1>审核失败</h1>
          <p @click="_personAgain">重新认证</p>
        </div>

        <!-- 实名认证流程异常 -->
        <div v-else-if="stepNum==8" class="certified-wrap">
          <img class="success-img" src="@/assets/icon-fail.png" alt />
          <h1>实名认证流程异常</h1>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  personGetIdTpye,
  personVertify,
  registerGetYstMobile,
  registerGetYstCode,
  persongGetVertifyData,
  registerEmpower,
  personAgain,
  personInit,
  register,
  registerPassword
} from "@/api/authentication";
export default {
  computed: {
    ...mapGetters(["memberInfo"])
  },
  data() {
    return {
      formLoading: false,
      loading: false,
      personDialogFlag: true,
      stepNum: 1,
      downNum: "",
      downShow: false,
      resCode: "",
      empowerUrl: "www.baidu.com",
      personCardType: [],
      getCodeParams: {
        action: 9,
        phone: ""
      },
      oneParams: {
        name: "",
        cardType: "1",
        idcard: ""
      },
      empowerParams: {
        code: ""
      },
      defaultType: "",
      defaultId: "",
      second: 5
    };
  },
  mounted() {
    // this.stepNum = 4;
    // this__register();
    this.loading = true;
    this._personGetIdTpye();
    this._getYstMobile();
    this._persongGetVertifyData();
    console.log("路由CODE", this.$route.params.code);
    // this.resCode = this.$route.params.code;
    // this.stepDistribute(this.resCode);
    if (this.$route.params.code) {
      this.resCode = this.$route.params.code;
      this.stepDistribute(this.resCode);
    } else {
      this._register();
    }
  },
  methods: {
    // 实名认证检测
    _register() {
      register().then(res => {
        console.log("实名认证检测res", res);
        let testCode = res.code;
        // let testCode = 10013;
        if (testCode == 10010) {
          // 实名认证选择页面
          this.$router.push({
            name: "explain"
          });
        } else if (testCode == 10025) {
          // 实名认证流程异常
          this.stepNum = 8;
          this.loading = false;
        } else if (
          (testCode >= 10011 && testCode <= 10014) ||
          testCode == 10021 ||
          testCode == 10022 ||
          (testCode == 10020 && this.memberInfo.yst_user_type == 1)
        ) {
          // 认证未完成跳转到个人认证页面
          this.stepDistribute(testCode);
        } else if (
          (testCode >= 10015 && testCode <= 10019) ||
          testCode == 10023 ||
          testCode == 10024 ||
          (testCode == 10020 && this.memberInfo.yst_user_type == 2)
        ) {
          // 认证未完成跳转到企业认证页面
          this.$router.push({
            name: "enterprise",
            params: {
              code: testCode
            }
          });
        }
      });
    },

    // 步骤分发
    stepDistribute(resCode) {
      console.log("步骤分发res", resCode);
      if (resCode == 10011 || !resCode) {
        // 第一步：个人实名信息提交
        this.stepNum = 1;
      } else if (resCode == 10012) {
        // 第二步：个人实名认证审核中
        this.stepNum = 5;
      } else if (resCode == 10013) {
        // 第三步：个人支付授权
        this.stepNum = 2;
      } else if (resCode == 10014) {
        // 第四步：设定支付密码
        this.stepNum = 3;
        let interval = setInterval(() => {
          if (this.second > 0) {
            this.second--;
          } else {
            clearInterval(interval);
            this.goSetPassWord();
          }
        }, 1000);
      } else if (resCode == 10021) {
        // 个人认证审核失败
        this.stepNum = 7;
      } else if (resCode == 10020) {
        // 个人认证审核成功
        this.stepNum = 4;
      } else if (resCode == 10022) {
        // 个人认证审核回退
        this.stepNum = 6;
      }
      this.loading = false;
    },
    // 验证码倒计时
    countDown() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.downNum = TIME_COUNT;
        this.downShow = true;
        this.timer = setInterval(() => {
          if (this.downNum > 0 && this.downNum <= TIME_COUNT) {
            this.downNum--;
          } else {
            this.downShow = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取身份证类型数据
    _personGetIdTpye() {
      personGetIdTpye().then(res => {
        let arr = [];
        for (let i in res.data.cardType) {
          arr.push({
            value: i,
            label: res.data.cardType[i]
          });
        }
        this.personCardType = arr;
        console.log("获取身份证类型数据", this.personCardType);
      });
    },
    selectCardType(val) {
      if (val == this.defaultType) {
        this.oneParams.idcard = this.defaultId;
      } else {
        this.oneParams.idcard = "";
      }
    },

    // 获取云商通手机号
    _getYstMobile() {
      registerGetYstMobile().then(res => {
        if (res.code == 1) {
          this.getCodeParams.phone = res.data.phone;
        }
      });
    },
    // 获取验证码
    _registerGetYstCode() {
      console.log("云商通手机号", this.getCodeParams);

      if (this.getCodeParams.phone == "") {
        this.$message.error("请输入手机号");
      } else {
        registerGetYstCode(this.getCodeParams).then(res => {
          if (res.code == 1) {
            this.countDown();
            this.$message.success("发送成功，请注意查收短信");
          } else {
            this.$message.error(res.msg || "短信发送失败");
          }
        });
      }
    },
    // 个人实名认证信息获取
    _persongGetVertifyData() {
      persongGetVertifyData().then(res => {
        if (res.code == 1) {
          console.log("个人实名认证信息", res);
          this.oneParams.name = res.data.name;
          this.oneParams.idcard = res.data.idcard;
          this.oneParams.cardType = res.data.cardType;
          this.defaultType = res.data.cardType;
          this.defaultId = res.data.idcard;
        }
      });
    },
    // 个人实名认证信息提交
    _personVertify() {
      if (this.oneParams.name == "") {
        this.$message.error("请输入真实姓名");
      } else if (this.oneParams.idcard == "") {
        this.$message.error("请输入证件号码");
      } else {
        this.formLoading = true;
        personVertify(this.oneParams)
          .then(res => {
            console.log("个人实名认证信息提交res", res);
            if (res.code == 1 && this.oneParams.cardType == 1) {
              this.stepNum = 2;
            } else if (res.code == 1 && this.oneParams.cardType != 1) {
              this.stepNum = 5;
            } else if (res.code != 1) {
              this.$message.error(res.msg || "请求失败");
            }
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },
    // 二次验证-支付授权
    _registerEmpower() {
      if (this.empowerParams.code == "") {
        this.$message.error("请输入验证码");
      } else {
        this.formLoading = true;
        registerEmpower(this.empowerParams)
          .then(res => {
            if (res.code == 1) {
              this.resCode = res.data.code;
              this.stepDistribute(this.resCode);
            } else {
              this.$message.error(res.msg || "请求失败");
            }
          })
          .finally(() => {
            this.formLoading = false;
          });
      }
    },
    // 前往设置交易密码
    goSetPassWord() {
      registerPassword().then(res => {
        console.log("设置交易密码res", res);
        if (res.code == 1) {
          // window.open(this.empowerUrl, "_self");
          window.open(res.data.url, "_self");
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },
    // 审核失败重新认证
    _personAgain() {
      personAgain().then(res => {
        if (res.code == 1) {
          this.resCode = res.data.code;
          this.stepDistribute(this.resCode);
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },
    // 审核回退重新认证
    _personInit() {
      personInit().then(res => {
        if (res.code == 1) {
          this.$route.push({
            name: "explain"
          });
        } else {
          this.$message.error(res.msg || "请求失败");
        }
      });
    },

    // 去开通电子合同服务
    goContractServices() {
      this.$router.push({ name: "contractServices" });
    }
  }
};
</script>

<style lang='scss'>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      .personal-form {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .el-input__inner {
                width: 300px;
              }
            }
          }
        }
      }
    }
  }
}
</style>


<style lang='scss' scoped>
.personal-wrap {
  .personal-dialog {
    background: #f0f0f0;

    .explain-top {
      height: 60px;
      border-bottom: 1px solid #f1f1f1;
      box-shadow: 0px 2px 5px #f1f1f1;
      background: #fff;
      .explain-top-content {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        h1 {
          display: inline-block;
          line-height: 60px;
          font-size: 30px;
          font-weight: bold;
          background-image: linear-gradient(0deg, #ff9303 0%, #fe6018 100%);
          -webkit-background-clip: text;
          color: transparent;
          margin: 0;
        }
        span {
          display: inline-block;
          vertical-align: top;
          margin-left: 30px;
          font-size: 16px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          position: absolute;
          top: 50%;
          left: 80px;
          transform: translateY(-50%);
        }
      }
    }
    .personal-dialog-content {
      width: 1200px;
      min-height: 700px;
      margin: 0 auto;
      background: #fff;
      overflow: hidden;
      margin-top: 20px;
      .dialog-step {
        width: 70%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 80px;
        margin-bottom: 70px;
        .step-item {
          width: 130px;
          font-size: 16px;
          span {
            padding: 2px 15px;
            background: #bcbcbc;
            border-radius: 11px;
            color: #fff;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              left: -90px;
            }
            &::after {
              content: "";
              position: absolute;
              width: 80px;
              height: 1px;
              background: #cccccc;
              top: 50%;
              transform: translateY(-50%);
              right: -90px;
            }
          }
          p {
            color: #bcbcbc;
          }
          &.step-active {
            span {
              background: #ff7f5b;
              &::after {
                background: #ff7f5b;
              }
              &::before {
                background: #ff7f5b;
              }
            }
            p {
              color: #ff7f5b;
            }
          }
          &:first-of-type {
            span {
              &::before {
                display: none;
              }
              &::after {
                background: #ff7f5b;
              }
            }
          }
          &:last-of-type {
            span {
              &::after {
                display: none;
              }
            }
          }
        }
      }
      .personal-form {
        width: 400px;
        margin: 0 auto;
        .el-form {
          .el-form-item {
            margin-bottom: 35px;
            &:last-of-type {
              margin-bottom: 50px;
            }
            .el-form-item__content {
              position: relative;
              .el-input__inner {
                width: 300px;
              }
              .getCode {
                color: #ff8765;
                position: absolute;
                right: 10px;
                display: block;
                height: 100%;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                &.getCode-wait {
                  color: #ccc;
                }
              }
            }
          }
        }
        .personal-btn {
          width: 100%;
          span {
            display: inline-block;
            width: 100px;
          }
          .el-button {
            width: 300px;
            height: 40px;
            background: #ff6f47;
            border: none;
            color: #fff;
            font-size: 16px;
            margin: 0 auto;
            &:hover {
              background: #ff7f5b;
            }
          }
        }
      }
      .personal-setPassword {
        text-align: center;
        font-size: 16px;
        color: #404040;
        margin-top: 200px;
        .goSet {
          cursor: pointer;
          color: #ff6f47;
        }
      }
      .personal-result {
        text-align: center;
        img {
          width: 80px;
          height: 100px;
          margin: 130px 0 20px 0;
        }
        h1 {
          font-size: 20px;
          font-weight: bold;
          color: #111;
          margin-bottom: 30px;
        }
        p {
          font-size: 16px;
          font-weight: 400;
          color: #999;
          cursor: pointer;
        }
        &.stepNum5 {
          img {
            width: 112px;
            height: 93px;
          }
        }
      }
    }
  }
}
</style>